<template>
  <div
    class="meet"
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.2)"
  >
    <div v-show="meetingFlag" class="has-meet" ref="meetPage" id="meetPage">
      <div class="video-div" ref="videoDiv" id="videoDiv">
        <!-- 播放按钮 -->
        <div v-show="!playFlag" class="play-div" @click="handlePlay()">
          <img src="@/assets/imgs/play.png" />
        </div>
        <!-- 顶部 -->
        <div class="top-div" id="top-div" v-show="showTop">
          <span class="meet-name"></span>
          <div class="meet-member">
            <MeetMember ref="MeetMember" :rotateFlag.sync="rotateFlag" />
          </div>
        </div>
        <!-- 视频 -->
        <video
          ref="remoteVideo"
          id="remoteVideo"
          class="video"
          muted
          autoplay="false"
          webkit-playsinline
          playsinline
          @click="handleShowTop()"
        ></video>
        <div class="close-div" v-show="showButton">
          <img @click="handlePlayVideo" :src="mutedFlag?voice_close_img:voice_on_img" />
          <span style="margin-left:10px"></span>
          <img @click="handleLogout()" src="@/assets/imgs/ic_call_hang_up.png" />
          <span style="margin-left:10px"></span>
          <img
            @click="handleFullScreen()"
            v-show="showFullButton"
            src="@/assets/imgs/screen_full.png"
          />
        </div>
      </div>
    </div>
    <div v-show="!meetingFlag" class="no-meet">
      <div class="txt" @click="handleJoinMeet()">重新连接</div>
    </div>
  </div>
</template>
<script>
import screenfull from 'screenfull'
import { mapState } from 'vuex'
import { destroySDK } from '@/utils/SDK'
import Webrtc2Sip from '@/utils/Webrtc2Sip'
import MeetMember from '@/components/Meet/MeetMember'
import { userEquFrom, cutString } from '@/utils/util'
export default {
  name: 'meet',
  components: {
    MeetMember,
  },
  data() {
    return {
      mutedFlag: true,
      voice_on_img: require('@/assets/imgs/ic_speaker_on.png'),
      voice_close_img: require('@/assets/imgs/ic_speaker_close.png'),
      userName: sessionStorage.getItem('userName'),
      meetingId: sessionStorage.getItem('meetingId'),
      meetingFlag: true,
      showButton: true,
      showTop: true,
      showFullButton: true,
      loading: true,
      rotateFlag: false,
      playFlag: false,
    }
  },
  computed: {
    ...mapState({
      meetUser: (state) => state.userInfo.meetUser,
    }),
  },
  methods: {
    init() {
      this.handleJoinMeet()
    },
    //加入会议
    handleJoinMeet() {
      this.loading = true
      let webrtc2Sip = Webrtc2Sip.getWebrtc2SipByName(this.userName)
      console.log('根据号码拿到的webrtc2sip', webrtc2Sip)
      if (webrtc2Sip) {
        // webrtc2Sip.setCustomEvent(this.sessionEvent, this.stackEvent)
        let meetingId = sessionStorage.getItem('meetingId')
        webrtc2Sip.setVideoDom('remoteVideo', '')
        webrtc2Sip.sipCall('call-live', meetingId)
        // webrtc2Sip.playVideo()
        this.meetingFlag = true
        this.loading = false
        this.handlePause()
      }
    },
    //挂断
    handleLogout() {
      // sessionStorage.clear()
      destroySDK()
      //软电话登出
      let webrtc2Sip = Webrtc2Sip.getWebrtc2SipByName(this.userName)
      webrtc2Sip.sipHangUp()
      this.meetingFlag = false
      // Webrtc2Sip.destroy()
    },
    //视频顶部展示/按钮 关闭
    handleShowTop() {
      console.log(this.showTop)
      if (this.showTop) {
        this.showTop = false
        this.showButton = false
      } else {
        this.showTop = true
        this.showButton = true
      }
    },
    //全屏
    handleFullScreen() {
      var width = document.documentElement.clientWidth
      var height = document.documentElement.clientHeight
      let meetPage = document.getElementById('meetPage')
      var sUserAgent = userEquFrom()
      console.log(sUserAgent)
      console.log(width)
      console.log(height)
      if (sUserAgent.isPhone || sUserAgent.isAndroid) {
        if (width < height) {
          //手机
          if (meetPage.style.position !== 'absolute') {
            meetPage.style.width = height + 'px'
            meetPage.style.height = width + 'px'
            meetPage.style.transform = 'rotate(90deg)'
            meetPage.style.top = (height - width) / 2 + 'px'
            meetPage.style.left = 0 - (height - width) / 2 + 'px'
            meetPage.style.position = 'absolute'
            // this.$refs.MeetMember.handleRotate(90)
            this.rotateFlag = true
            // this.handleSetCreenfull()
          } else {
            meetPage.style.width = '100%'
            meetPage.style.height = '100%'
            meetPage.style.transform = ''
            meetPage.style.top = '0'
            meetPage.style.left = '0'
            meetPage.style.position = 'relative'
            // this.$refs.MeetMember.handleRotate(0)
            this.rotateFlag = false
            // this.handleSetCreenfull()
          }
          // this.handleSetCreenfull()
          return
        } else {
          //平板
          this.handleSetCreenfull()
        }
      } else {
        this.handleSetCreenfull()
      }

      if (sUserAgent.isPc) {
        // let videoDiv = document.getElementById('videoDiv')
        // if (videoDiv.style.width === '100%') {
        //   videoDiv.style.width = '60%'
        //   videoDiv.style.height = '60%'
        //   videoDiv.style.top = '40%'
        // } else {
        //   videoDiv.style.width = '100%'
        //   videoDiv.style.height = '100%'
        //   videoDiv.style.top = '50%'
        // }
      }
    },
    renderResize() {
      // 判断横竖屏
      let width = document.documentElement.clientWidth
      let height = document.documentElement.clientHeight
      if (width > height) {
        this.showFullButton = false
        if (meetPage.style.position === 'absolute') {
          meetPage.style.width = '100%'
          meetPage.style.height = '100%'
          meetPage.style.transform = ''
          meetPage.style.top = '0'
          meetPage.style.left = '0'
          meetPage.style.position = 'relative'
        } else {
          // meetPage.style.width = height + 'px'
          // meetPage.style.height = width + 'px'
          // meetPage.style.transform = 'rotate(90deg)'
          // meetPage.style.top = (height - width) / 2 + 'px'
          // meetPage.style.left = 0 - (height - width) / 2 + 'px'
          // meetPage.style.position = 'absolute'
        }
      } else {
        this.showFullButton = true
      }
      // 做页面适配
      // 注意：renderResize 方法执行时虚拟 dom 尚未渲染挂载，如果要操作 vue 实例，最好在this.$nextTick()里进行。
    },
    //设置浏览器全屏，取消全屏
    handleSetCreenfull() {
      if (screenfull.isFullscreen) {
        screenfull.exit()
      } else {
        var sUserAgent = userEquFrom()
        if (sUserAgent.isPhone || sUserAgent.isTablet) {
          screenfull.request()
        } else {
          screenfull.request(this.$refs.videoDiv)
        }
      }
    },
    handleIsShowFullButton() {
      var sUserAgent = userEquFrom()
      if (sUserAgent.isPhone || sUserAgent.isAndroid || sUserAgent.isPc) {
        this.showFullButton = true
      } else if (sUserAgent.isTablet) {
        this.showFullButton = false
      }
    },
    //播放视频声音
    handlePlayVideo() {
      let remoteVideo = document.getElementById('remoteVideo')
      this.mutedFlag = !this.mutedFlag
      remoteVideo.muted = this.mutedFlag
      console.log('muted:' + this.mutedFlag)
    },
    //视频暂停
    handlePause() {
      let remoteVideo = document.getElementById('remoteVideo')
      remoteVideo.pause()
    },
    //会议结束
    handleOverMeet() {
      this.meetingFlag = false
    },
    //开始播放视频
    handlePlay() {
      this.playFlag = true
      let remoteVideo = document.getElementById('remoteVideo')
      // remoteVideo.autoplay = true
      remoteVideo.play()
      this.handlePlayVideo()
    },
  },
  mounted() {
    this.init()
    // 监听 横竖屏 resize 方法
    // window.addEventListener('resize', this.renderResize, false)
    //监听 点击事件
    // window.addEventListener('click', this.handlePlayVideo)
    //初始化 是否展示 全屏 按钮
    // this.handleIsShowFullButton()
    window['handleJoinMeet'] = (res) => {
      this.handleJoinMeet.call(this, res)
    }
    window['handleOverMeet'] = (res) => {
      this.handleOverMeet.call(this, res)
    }
  },
  beforeDestroy() {
    // 移除监听
    // window.removeEventListener('resize', this.renderResize, false)
    let webrtc2Sip = Webrtc2Sip.getWebrtc2SipByName(this.userName)
    if (webrtc2Sip) {
      webrtc2Sip.sipHangUp()
    }
  },
}
</script>

<style  lang="scss" scope>
/*手机*/
//竖屏
.meet {
  height: 100%;
  width: 100%;
  background-image: url('~@/assets/imgs/ic_voice_call_1.png');
  .has-meet {
    height: 100%;
    width: 100%;
  }
  .no-meet {
    height: 100%;
    width: 100%;
    text-align: center;
    .txt {
      color: white;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      cursor: pointer;
    }
  }
  .video-div {
    width: 100%;
    height: 100%;
    position: relative;
    top: 50%; /*偏移*/
    transform: translateY(-50%);
    .top-div {
      z-index: 9999999;
      position: absolute;
      background-color: #282729;
      height: 45px;
      opacity: 0.9;
      color: white;
      width: 100%;
      // display: none;
      .meet-name {
        float: left;
        line-height: 40px;
        font-size: 14px;
      }
      .meet-member {
        font-size: 6px;
        .member-item {
          float: right;
          padding: 2px 3px 2px 3px;
          width: 40px;
          text-align: center;
        }
        .member-All {
          float: right;
          padding: 0 3px 0 0;
          .circle {
            margin-top: 5px;
            background-color: #0688ef;
            height: 30px;
            width: 30px;
            border-radius: 100%;
            padding: 7px 2px 8px 4px;
            i {
              font-size: 15px;
            }
            span {
              font-size: 13px;
            }
          }
        }
      }
    }
    video {
      object-fit: contain;
      width: 100%;
      height: 100%;
    }
    .play-div {
      z-index: 9999;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
    }
  }
  .close-div {
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    img {
      width: 40px;
      height: 40px;
    }
  }
}
/*ipad*/
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
  .meet {
    height: 100%;
    width: 100%;
    background-image: url('~@/assets/imgs/ic_voice_call_1.png');
    .video-div {
      height: 100%;
      .top-div {
        background-color: #282729;
        .meet-name {
          line-height: 40px;
        }
        .meet-member {
          font-size: 6px;
        }
      }
      video {
        object-fit: fill;
        width: 100%;
        height: 100%;
      }
    }
    .close-div {
      position: absolute;
      bottom: 0px;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}
/*pc总体*/
@media screen and (min-device-width: 1025px) {
  .meet {
    height: 100%;
    width: 100%;
    background-image: url('~@/assets/imgs/ic_voice_call_1.png');
    .video-div {
      width: 60%;
      height: 60%;
      background-color: black;
      position: relative;
      top: 40%; /*偏移*/
      transform: translateY(-50%);
      margin: auto;
      .top-div {
        background-color: #282729;
        color: white;
        .meet-name {
          float: left;
          line-height: 40px;
        }
        .meet-member {
          float: right;
          font-size: 6px;
        }
      }
      video {
        object-fit: fill;
        width: 100%;
        height: 100%;
      }
    }
    .close-div {
      position: absolute;
      bottom: 0%;
      left: 50%;
      transform: translate3d(-50%, -50%, 0);
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
}
</style>
